<template>
  <text class="price" :style="{'fontSize': smallFontSize, color: color}">
    <text v-if="props.type === 1 && showCurrency">{{currency}}</text>
    <text :style="{'fontSize': bigFontSize}">{{priceData.integerPrice}}</text>
    <text  v-if="priceData.decimalPrice">{{priceData.decimalPrice}}</text>
    <text v-if="props.type === 2 && showCurrency"> 积分</text>
  </text>
</template>

<script setup>
import { ref, computed } from 'vue'
const text = ref('旭之鑫平台公告：618大促，器械满2999减300元')
const props = defineProps({
  price: {
    type: Number,
    default: 0
  },
  currency: {
    type: String,
    default: '￥'
  },
  showCurrency: {
    type: Boolean,
    default: true
  },
  smallFontSize: {
    type: String,
    default: '24rpx'
  },
  bigFontSize: {
    type: String,
    default: '48rpx'
  },
  color: {
    type: String,
    default: '#FA5151'
  },
  type: {
    type: Number,
    default:  1
  }
})

const priceData = computed(()=> {
  const totalPrice = props.price || 0
  if(totalPrice) {
    const price = totalPrice.toFixed(2)
    const [ integerPrice, decimalPrice] = price.split('.')
    // return price.split('.')[0]
    return {
      integerPrice,
      decimalPrice: '.' + decimalPrice
    }
  }
  return  {
    integerPrice: 0,
    decimalPrice: 0,
  }
})
</script>

<style lang="scss" scoped>

</style>
